<template>
  <div class="box">
    <div class="box1">
      <myswiper></myswiper>
    </div>
    <div class="body">
      <div class="bodybox">
        <div class="bodybox1">
          <div class="bodyleft">
            <div class="leftbox">
              <!-- 热门歌单 -->
              <div class="bodyhot">
                <div class="hotbox">
                  <a href="#" class="bodyleftbtn">热门推荐</a>
                  <div class="alla">
                    <a href="#" class="hota">华语</a>
                    <span class="hotspan">|</span>
                    <a href="#" class="hota">流行</a>
                    <span class="hotspan">|</span>
                    <a href="#" class="hota">摇滚</a>
                    <span class="hotspan">|</span>
                    <a href="#" class="hota">民谣</a>
                    <span class="hotspan">|</span>
                    <a href="#" class="hota">电子</a>
                  </div>
                  <span class="more">
                    <a href="#" class="morea">更多</a>
                    <i class="morei">&nbsp;</i>
                  </span>
                </div>
                <ul class="hotul">
                  <li class="hotli" v-for="data in songlist" :key="data.id">
                    <div class="libox" @click="getsongsdata(data.id)">
                      <img :src="data.picUrl" alt="" class="liimg" />
                      <a href="imga"></a>
                    </div>
                    <p class="lip">
                      <a href="p-a">{{ data.name }}</a>
                    </p>
                  </li>
                </ul>
              </div>
              <!-- 新碟上架 -->
              <div class="newsong">
                <div class="hotbox">
                  <a href="#" class="bodyleftbtn">新碟上架</a>
                  <span class="more">
                    <a href="#" class="morea">更多</a>
                    <i class="morei">&nbsp;</i>
                  </span>
                </div>
                <div class="newsongdata">
                  <div class="newbox">
                    <a href="#" class="newaleft"></a>
                    <div class="newbox1">
                      <ul class="newul" v-if="NewListData.lenght">
                        <li
                          class="newli"
                          v-for="(data, index) in NewListData"
                          :key="index"

                        >
                          <div class="newliimg" @click="getnewdata(data.id)">
                            <img class="imgurl" :src="data.picUrl" />
                          </div>
                          <p class="newlip1">{{ data.name }}</p>
                          <p class="newlip2">{{ data.artists[0].name }}</p>
                        </li>
                      </ul>
                    </div>
                    <a href="#" class="newaright"></a>
                  </div>
                </div>
              </div>
              <!-- 榜单 -->
              <div class="listbox">
                <div class="hotbox">
                  <a href="#" class="bodyleftbtn">榜单</a>
                  <span class="more">
                    <a href="#" class="morea">更多</a>
                    <i class="morei">&nbsp;</i>
                  </span>
                </div>
                <div class="listbody">
                  <div class="bodydiv" v-for="item in listdata" :key="item.id">
                    <div class="l_top">
                      <img :src="item.coverImgUrl" alt="" class="l_top_img" />
                      <span class="l_top_span">
                        <span class="t_span1">{{ item.name }}</span>
                        <span class="spanimg spanimg-1"></span>
                        <span class="spanimg spanimg-2"></span>
                      </span>
                    </div>
                    <div class="l_body">
                      <ul class="l_body_ul">
                        <li
                          class="l_body_li"
                          v-for="data in item.tracks"
                          :key="data.id"
                        >
                          {{ data.first }}
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 右侧 -->
          <div class="bodyright">
            <!-- 用户未登录的框 -->
            <div class="nolong" v-show="true">
              <p class="nolong_p">
                登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
              </p>
              <a class="userlogin">用户登录</a>
            </div>
            <!-- 用户登录的框 -->
            <div class="islogin" v-show="false">
              <div class="islogin1">
                <img src="" alt="" class="loginimg" />
              </div>
              <div class="islogin2">
                <span class="loginspan">
                  <span class="spandata spantop">1</span>
                  <span class="spandata spanbotton">动态</span>
                </span>
                <span class="loginspan">
                  <span class="spandata spantop">1</span>
                  <span class="spandata spanbotton">关注</span>
                </span>
                <span class="loginspan">
                  <span class="spandata spantop">1</span>
                  <span class="spandata spanbotton">粉丝</span>
                </span>
              </div>
            </div>
            <div class="hotsingger">
              <p class="singgerp">
                <span class="singgerspan">入驻歌手</span>
                <a href="#" class="singgera">查看全部></a>
              </p>
              <ul class="singgerul">
                <li
                  class="singgerli"
                  v-for="(data, index) in singger"
                  :key="index"
                >
                  <a href="#" class="singgerli_a">
                    <div class="a_left">
                      <img :src="data.img1v1Url" alt="" class="left_img" />
                    </div>
                    <div class="a_right">
                      <h4 class="right_h4">
                        <span class="h4_span">{{ data.name }}</span>
                      </h4>
                      <p class="right_p"></p>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myswiper from '../../components/swiper/MySwiper.vue'
export default {
  components: {
    myswiper
  },
  data () {
    return {
      songlist: [],
      newsonglist: [],
      // 榜单数据
      listdata: [],
      // 歌手
      singger: []
    }
  },
  mounted () {
    // 获取推荐歌单
    this.hotsonglist()
    // 获取新碟上架
    this.getnewlist()
    // 获取榜单信息
    this.getlist()
    // 测试歌手
    this.getsingger()
  },
  methods: {
    // 获取推荐歌单
    hotsonglist () {
      this.maxaxios.get('/personalized', { limit: 8 }).then((res) => {
        this.songlist = res.result
        // console.log(res);
      })
    },
    // 获取新碟上架
    getnewlist () {
      this.maxaxios.get('/album/newest').then((res) => {
        this.newsonglist = res.albums
        // console.log("是这里", res);
      })
    },
    // 获取榜单信息
    getlist () {
      const arr = []
      this.maxaxios.get('/toplist/detail').then((res) => {
        for (let i = 0; i < 3; i++) {
          arr.push(res.list[i])
        }
        // console.log(arr);
        this.listdata = arr
      })
    },
    // 获取入驻歌手
    getsingger () {
      this.maxaxios.get('/artist/list', { limit: 5 }).then((res) => {
        this.singger = res.artists
      })
    },
    // 修改专辑id
    getsongsdata (id) {
      this.$router.push('/songsdata')
      this.$store.commit('ChangeAlbumId', id)
      // this.$store.state.albunid = id;
    },
    getnewdata (id) {
      // 获取新碟上架的数据
      this.maxaxios.get('/album', { id })
        .then(res => {
          console.log(res)
        })
    }
  },
  computed: {
    NewListData () {
      const array = []
      for (let i = 0; i < 5; i++) {
        array.push(this.newsonglist[i])
      }
      return array
    }
  }
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  margin: auto;
}
.box1 {
  width: 100%;
  height: 100%;
}
.body {
  width: 100%;
  height: 100%;
  /* background-color: #22b4a1; */
}
.bodybox {
  width: 100%;
  height: 100%;
  margin: auto;
}
.bodybox1 {
  width: 1000px;
  height: 100%;
  /* background-color: #519126; */
  margin: auto;
  border: 1px solid #d3d3d3;
}
.bodybox1::after {
  content: "";
  clear: both;
  display: block;
}
.bodyleft {
  width: 75%;
  height: 100%;
  float: left;
}
.leftbox {
  width: 710px;
  /* background-color: #52075b; */
  padding: 20px 20px 40px;
}
.bodyhot {
  display: block;
}
.hotbox {
  background-image: url(../../../public/img/index.png);
  height: 33px;
  padding: 0 10px 0 34px;
  background-position: -225px -156px;
  border-bottom: 2px solid #c10d0c;
  background-repeat: no-repeat;
}
.bodyleftbtn {
  float: left;
  font-size: 20px;
  font-weight: normal;
  line-height: 28px;
  color: black;
}
.alla {
  float: left;
  margin: 7px 0 0 20px;
}
.hota {
  color: #666;
  font-size: 12px;
}
.hota:hover {
  border-bottom: 1px solid #666;
}
.hotspan {
  margin: 0 10px;
  color: #ccc;
}
.more {
  float: right;
  margin-top: 9px;
}
.morea {
  color: #666;
  font-size: 12px;
}
.morei {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: middle;
  background-position: 0 -240px;
  background-image: url(../../../public/img/index.png);
  background-repeat: no-repeat;
}
.hotul {
  margin: 20px 0 0 -42px;
}
.hotul::after {
  content: "";
  clear: both;
  display: block;
}
.hotli {
  width: 136px;
  height: 204px;
  padding-left: 42px;
  float: left;
  display: inline-block;
  /* width: 140px;
  height: 188px; */
  overflow: hidden;
  padding: 0 0 30px 50px;
  line-height: 1.4;
}
.libox {
  width: 140px;
  height: 140px;
  position: relative;
  display: block;
  cursor: pointer;
}
.liimg {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.imga {
  background-position: 0 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../../../public/img/coverall.png);
  background-repeat: no-repeat;
}
.lip {
  margin: 8px 0 3px;
  font-size: 14px;
  width: 100%;
}
.p-a {
  display: inline-block;
  max-width: 100%;
  /* width: 100%; */
  vertical-align: middle;
}
.newsongdata {
  position: relative;
  zoom: 1;
  height: 186px;
  margin: 20px 0 37px;
  border: 1px solid #d3d3d3;
}
.newbox {
  height: 184px;
  padding-left: 16px;
  background: #f5f5f5;
  border: 1px solid #fff;
}
.newaleft {
  left: 4px;
  position: absolute;
  top: 71px;
  width: 17px;
  height: 17px;
  background-position: -260px -75px;
  background-repeat: no-repeat;
  background-image: url(../../../public/img/index.png);
}
.newbox1 {
  float: left;
  width: 645px;
  height: 180px;
  overflow: hidden;
}
.newaright {
  position: absolute;
  top: 71px;
  width: 17px;
  height: 17px;
  background-position: -300px -75px;
  background-repeat: no-repeat;
  background-image: url(../../../public/img/index.png);
}
.newul {
  margin: 28px 0 0 0;
}
.newli {
  float: left;
  display: inline;
  width: 118px;
  height: 150px;
  margin-left: 11px;
  background-position: -260px 100px;
  background-image: url(../../../public/img/index.png);
  background-repeat: no-repeat;
}
.newliimg {
  margin-bottom: 7px;
  width: 100px;
  height: 100px;
  position: relative;
  display: block;
}
.imgurl {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.newlip1 {
  width: 90%;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  font-size: 12px;
}
.newlip2 {
  width: 90%;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  font-size: 12px;
}
.listbox {
  width: 100%;
}
.listbody {
  height: 472px;
  margin-top: 20px;
  padding-left: 1px;
  background-image: url(../../../public/img/index_bill.png);
  background-repeat: no-repeat;
}
.bodydiv {
  float: left;
  width: 230px;
}
.bodydivright {
  width: 228px;
}
.l_top {
  height: 100px;
  padding: 20px 0 0 19px;
  position: relative;
}
.l_top_img {
  width: 80px;
  height: 80px;
}
.l_top_span {
  display: inline-block;
  width: 80px;
  height: 60px;
  margin-left: 10px;
  position: absolute;
  top: 30px;
}
.t_span1 {
  display: inline-block;
  font-weight: bold;
  width: 100%;
  margin-bottom: 5px;
}
.spanimg {
  display: inline-block;
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.spanimg-1 {
  background-image: url(../../../public/img/index.png);
  background-repeat: no-repeat;
  margin-right: 5px;
  background-position: -267px -205px;
}
.spanimg-2 {
  background-image: url(../../../public/img/index.png);
  background-repeat: no-repeat;
  background-position: -300px -205px;
}
.l_body_ul {
  height: 319px;
  margin-left: 50px;
  line-height: 32px;
}
.l_body_li {
  height: 32px;
  font-size: 12px;
  cursor: pointer;
}
/* 右 */
.bodyright {
  width: 25%;
  height: 100%;
  /* background-color: #c48818; */
  float: right;
}
.nolong {
  height: 126px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url(../../../public/img/index.png);
}
.nolong_p {
  width: 80%;
  margin: auto;
  padding: 20px;
  color: #666666;
  font-size: 12px;
}
.userlogin {
  display: block;
  width: 100px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 0 #8a060b;
  margin: 0 auto;
  background-image: url(../../../public/img/index.png);
  background-repeat: no-repeat;
  background-position: 0 -195px;
  cursor: pointer;
}
.islogin {
  height: 165px;
  /* background-color: #666666; */
  padding-top: 20px;
  background-image: url(../../../public/img/index.png);
  background-repeat: no-repeat;
  background-position: 0 -270px;
}
.islogin1 {
  height: 90px;
  /* background-color: #31e195; */
}
.loginimg {
  width: 86px;
  height: 86px;
  /* background-color: rgb(37, 203, 28); */
  margin-left: 20px;
  border: 1px solid #dadada;
}
.islogin2 {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
  padding: 0 25px;
}
.loginspan {
  display: inline-block;
}
.spandata {
  display: block;
}
.spantop {
  font-size: 20px;
}
.spanbotton {
  font-size: 12px;
}
.hotsingger {
  margin-top: 15px;
}
.singgerp {
  position: relative;
  height: 23px;
  margin: 0 20px;
  border-bottom: 1px solid #ccc;
  color: #333;
}
.singgerspan {
  font-size: 12px;
  font-weight: bold;
}
.singgera {
  float: right;
  font-weight: normal;
  color: #666;
  cursor: pointer;
  font-size: 12px;
}
.singgerul {
  margin: 6px 0 14px 20px;
}
.singgerli {
  margin-top: 14px;
  float: left;
  width: 210px;
  height: 62px;
  background: #fafafa;
}
.singgerli_a {
}
.a_left {
  float: left;
  width: 62px;
  height: 62px;
}
.left_img {
  float: left;
  width: 62px;
  height: 62px;
}
.a_right {
  float: left;
  width: 133px;
  height: 60px;
  padding-left: 14px;
  border: 1px solid #e9e9e9;
  border-left: none;
}
.right_h4 {
  cursor: pointer;
  margin-top: 8px;
  font-size: 100%;
}
.h4_span {
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.right_p {
  cursor: pointer;
  width: 90%;
  margin-top: 8px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  font-size: 12px;
}
</style>
